<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/Task.css" media="print" onload="this.media='all'">
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400&family=Roboto:wght@100;300;400;500;700;900&family=Source+Code+Pro:wght@200;400;600;800&display=swap"
      rel="stylesheet"
    />
    <title>TODOList</title>
  </head>
  <body>
    <div id="app">
      <div class="header">
        <div class="header-title">
          <span class="header-title-text"><img src="./icons/todo.png"></span>
        </div>
        <button onclick="switchTheme()" id="switch">C</button>
      </div>

      <div class="app-body">
        <div class="taskmanager">
          <div class="inner-header">
            <span class="inner-header-title" id="manager-title"></span>
          </div>
          <div class="new-interface">
            <input type="text" id="tasklist-name" />
            <button id="new-tasklist">-></button>
          </div>
          <hr>
          <ul id="manager"></ul>
        </div>

        <div class="tasklist">
          <div class="inner-header">
            <span class="inner-header-title" id="list-title"></span>
            <span id="list-name"></span>
            <button onclick="deleteList()" class="list-icon">
              <img src="./icons/delete.png">
            </button>
          </div>
          <div id="new-tasklist-id" class="new-interface">
            <input type="text" id="task-name"/>
            <textarea id="task-description"></textarea>
            <input type="number" id="task-lvl" placeholder="0" />
            <input type="date" id="task-date"/>
            <button id="new-task">-></button>
          </div>
          <hr>
          <ul id="list"></ul>
        </div>

        <div class="task-viewer">
          <div id="task">
            <div class="task-view">
              <div class="inner-header" id="task-title">
                <span class="inner-header-title" id="view-title"></span>
              </div>
              <p class="task-description"></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal">
      <div class="modal-content">
        <span class="modal-decorate">TODOList</span>
        <a href="https://github.com/ivanvit100/TODOList" class="modal-github">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
          >
            <path
              d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
              fill="#a4a4a4"
              onmouseover="this.setAttribute('fill', '#007bff')"
              onmouseout="this.setAttribute('fill', '#a4a4a4')"
            />
          </svg>
        </a>
        <h1 class="modal-title"></h1>
        <div class="modal-inputs">
          <input class="modal-input" id="modal-login" type="text" />
          <input class="modal-input" id="modal-password" type="password" />
        </div>
        <div class="modal-buttons">
          <button id="modal-enter" class="modal-button"></button>
        </div>
      </div>
    </div>
    <script type="module" src="./js/Tasks.js"></script>
    <script type="module" src="./js/index.js"></script>
  </body>
</html>
